বুটস্ট্রাপ ৫ এ, ডিফল্টভাবে একটি রঙের প্যালেট (Color Palette) রয়েছে যা ওয়েব পেজের বিভিন্ন উপাদান, যেমন ব্যাকগ্রাউন্ড, টেক্সট, বোতাম, এবং অন্যান্য স্টাইলের জন্য রঙ ব্যবহারের জন্য ব্যবহৃত হয়। বুটস্ট্রাপের এই রঙের প্যালেটটি খুবই লাইট এবং ডার্ক রঙের কম্বিনেশন, যা সহজে কাস্টমাইজ করা যায় এবং ওয়েব ডিজাইনে ব্যবহার করা হয়।
বুটস্ট্রাপ ৫ এ এই রঙের প্যালেটটি বিভিন্ন সিনট্যাক্স এবং ক্লাস হিসেবে উপলব্ধ, যা আপনাকে দ্রুত রঙ প্রয়োগ করতে সহায়তা করে।
বুটস্ট্রাপের ডিফল্ট রঙের প্যালেটটি ১২টি মূল রঙের সেট নিয়ে তৈরি। এগুলোর মধ্যে রয়েছে:
এই রঙগুলো বিভিন্ন উপাদান ও স্টাইলের জন্য ডিফল্টভাবে ব্যবহৃত হয়। নিচে বুটস্ট্রাপের প্রধান রঙগুলোর উদাহরণ দেওয়া হলো।
<button class="btn btn-primary">Primary Button</button>
প্রাথমিক রঙ সাধারণত হাইলাইট করা, অ্যাকশনযোগ্য বোতাম বা উপাদানগুলির জন্য ব্যবহৃত হয়।
<button class="btn btn-secondary">Secondary Button</button>
সেকেন্ডারি রঙ সাধারণত প্রাথমিক রঙের বিকল্প হিসেবে ব্যবহৃত হয়।
<button class="btn btn-success">Success Button</button>
সাফল্যের রঙ সফল কোনো অ্যাকশন বা অপারেশনের জন্য ব্যবহার করা হয়, যেমন ফর্ম সাবমিট বা সফলভাবে সম্পন্ন কাজ।
<button class="btn btn-danger">Danger Button</button>
ঝুঁকি বা ভুল সতর্কতার জন্য ব্যবহৃত রঙ, যেমন মুছতে যাওয়ার সময় বা ক্রিটিক্যাল অপারেশন।
<button class="btn btn-warning">Warning Button</button>
সতর্কতা বা সাবধানতা জানাতে ব্যবহৃত রঙ। এটি সাধারণত ব্যবহারকারীকে একটি পদক্ষেপ নিতে সতর্ক করে।
<button class="btn btn-info">Info Button</button>
তথ্য প্রদানকারী রঙ, সাধারণত তথ্য বা নির্দেশনা প্রদানের জন্য ব্যবহার হয়।
<button class="btn btn-light">Light Button</button>
হালকা রঙের বোতাম সাধারণত মৃদু বা ডিফল্ট তথ্য বা টেক্সট প্রদর্শন করতে ব্যবহৃত হয়।
<button class="btn btn-dark">Dark Button</button>
গা dark ় রঙের বোতাম বা উপাদানগুলো সাধারণত দৃঢ় বা মার্জিত অনুভূতি প্রদানের জন্য ব্যবহৃত হয়।
বুটস্ট্রাপের বিভিন্ন ক্লাস ব্যবহার করে আপনি ব্যাকগ্রাউন্ড এবং টেক্সট রঙ কাস্টমাইজ করতে পারেন।
<div class="bg-primary text-white p-3">
এই বিভাগটির ব্যাকগ্রাউন্ড প্রাথমিক রঙ এবং টেক্সট সাদা।
</div>
<p class="text-danger">
এই প্যারাগ্রাফের টেক্সট ঝুঁকি রঙে প্রদর্শিত হবে।
</p>
বুটস্ট্রাপ ৫ এ রঙের জন্য CSS Variables এবং Custom Properties ব্যবহার করা হয়েছে। আপনি চাইলে এই রঙগুলোকে কাস্টমাইজ করে আপনার প্রয়োজন অনুযায়ী সেট করতে পারেন। নিচে বুটস্ট্রাপের ডিফল্ট রঙের তালিকা দেওয়া হলো:
#0d6efd#6c757d#198754#dc3545#ffc107#0dcaf0#f8f9fa#212529#6c757d#ffffff#000000আপনি যদি বুটস্ট্রাপের রঙ পরিবর্তন করতে চান, তবে আপনি CSS ব্যবহার করে সহজেই স্টাইল পরিবর্তন করতে পারেন। উদাহরণস্বরূপ:
<style>
.custom-btn {
background-color: #ff5733; /* কাস্টম রঙ */
color: #ffffff;
}
</style>
<button class="btn custom-btn">Custom Button</button>
এইভাবে আপনি বুটস্ট্রাপের ডিফল্ট রঙ প্যালেটের বাইরে গিয়ে কাস্টম রঙও ব্যবহার করতে পারবেন।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
